window.addEventListener('load', function() {
    var focus = document.querySelector('.focus');   // 获取focus
    var focus_ul = focus.querySelector('ul');   // 获取focus里的ul
    var focusWidth = focus.offsetWidth;     // focus的宽度
    var index = 0;    // 全局变量
    var circle = document.querySelector('.circle');

    // 1.给轮播图区添加自动播放：
    var timer = setInterval(function() {
        index++;
        var translatex = -index * focusWidth;
        focus_ul.style.transition = 'all .4s';
        focus_ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 3000);
    // 2. transitionend事件  当过渡结束后触发：
    focus_ul.addEventListener('transitionend', function() {
        // 如果index等于3 也就是到了最后一张, 那么index赋值为0 并且把过渡关闭, 快速移动到最原来的位置：
        if (index >= 3) {
            index = 0;
            focus_ul.style.transition = 'none';
            var translatex = -index * focusWidth;
            focus_ul.style.transform = 'translateX(' + translatex + 'px)'
        } else if (index < 0) {       // 或者如果index小于0 也就是从第一张往回滑到最后一张, 那么我就用同样的手段把它迅速跳到第三张
            index = 2;
            focus_ul.style.transition = 'none';
            var translatex = -index * focusWidth;
            focus_ul.style.transform = 'translateX(' + translatex + 'px)';
        };
        circle.querySelector('.circurrent').classList.remove('circurrent');     // 移除circle中有circurrent这个类名的circurrent类样式
        circle.children[index].style.transition = 'all .3s';
        circle.children[index].classList.add('circurrent');
    });
    // 3.当我滚动了一定长度后,显示返回顶部按钮
    var gobackTop = document.querySelector('.gobackTop');
    var localNav = document.querySelector('.local-nav');
    window.addEventListener('scroll', function() {
        if (window.pageYOffset >= localNav.offsetTop) {
            gobackTop.style.display = 'block';
        } else {
            gobackTop.style.display = 'none';
        }
    });
    // 4.给gobackTop按钮添加点击事件,点击一下就返回页面顶部
    gobackTop.addEventListener('click', function() {
        window.scroll(0, 0);
    });
    // 5.调用fastclick.js的语法：
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
        }, false);
    };

// 手指滑动：
    // 1.手指按下：
    var startX = null;
    var moveX = null;
    var flag = false;
    focus.addEventListener('touchstart', function(e) {
        clearInterval(timer);       // 手指按住之后先停止轮播图
        startX = e.targetTouches[0].pageX;
    });
    focus.addEventListener('touchmove', function(evt) {
        moveX = evt.targetTouches[0].pageX - startX;
        var translatex = -index * focusWidth + moveX;
        focus_ul.style.transition = 'none';
        focus_ul.style.transform = 'translateX(' + translatex + 'px)';
        flag = true;    // 如果移动了再把flag改成true
    });
    focus.addEventListener('touchend', function() {
        if (flag) {
            // 如果滑动距离大于80, 就执行切换图片：
            if (Math.abs(moveX) > 80) {
                // 如果大于0就是正数,就滑倒上一张
                if (moveX > 0) {
                    index--;
                } else if (moveX < 0) {
                    // 如果小于0就是负数, 就滑倒下一张
                        index++;
                }
                var translatex = -index * focusWidth;
                focus_ul.style.transition = 'all .3s';
                focus_ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                var translatex = -index * focusWidth;
                focus_ul.style.transition = 'all .3s';
                focus_ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
    });
});